<template>
  <div class="container">
    <div class="mainContent">
      <div class="header">
        <div class="searchArea">
          <div class="leftInput">
            <div class="searchIcon"></div>
            <input type="text" auto-focus v-model="searchInput" @confirm="handleComfirmInput" confirm-type="search" placeholder="搜索姓名" placeholder-style="color: #171717;" >
          </div>
          <div class="clearIcon" @click="handleClearInputData"></div>
        </div>
      </div>
      <div v-show="searchHistoryList.length > 0" class="historySearchResult">
        <div class="title">历史记录</div>
        <div class="resultList">
          <div v-for="(item, index) of searchHistoryList" :key="index" class="resultItem" @click="handleChoHistoryToSearch(item.long)">{{ item.short }}</div>
        </div>
      </div>

    </div>
  </div>  
</template>

<script>
export default {
  onLoad (option) {
    this.activeType = option.activeType
    this.searchHistoryList = wx.getStorageSync('searchHistory') || []
  },
  data () {
    return {
      activeType: '',
      searchInput: '',
      searchHistoryList: []
    }
  },
  mounted () {
  },
  methods: {
    // 确认搜索
    handleComfirmInput () {
      const str = this.searchInput.length > 5 ? this.searchInput.substring(0, 5) : this.searchInput
      const obj = {
        long: this.searchInput,
        short: str
      }
      if (JSON.stringify(this.searchHistoryList).indexOf(JSON.stringify(obj)) === -1) {
        this.searchHistoryList.push(obj)
        wx.setStorage({
          key: 'searchHistory',
          data: this.searchHistoryList
        })
      }
      this.jumpToListPage(this.searchInput)
    },
    handleClearInputData () {
      this.searchInput = ''
    },
    // 跳转至列表页
    jumpToListPage (searchName) {
      this.searchInput = ''
      if (this.activeType === 'all') {
        wx.setStorage({
          key: 'searchInput',
          data: searchName
        })
        wx.setStorage({
          key: 'isInSearchCondition',
          data: true
        })
        wx.navigateBack()
      } else {
        wx.redirectTo({ url: '../myStudentList/main?activeType=' + this.activeType + '&search=' + searchName })
      }
    },
    handleChoHistoryToSearch (data) {
      this.jumpToListPage(data)
    }
  }
}
</script>

<style lang="less" scoped>
  .mainContent {
    padding: 0 30rpx 50rpx;
    .header {
      padding: 23rpx 0 21rpx;
      margin-bottom: 58rpx;
      .searchArea {
        width: 100%;
        height: 56rpx;
        background: #F5F5F5;
        border-radius: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx 0 20rpx;
        box-sizing: border-box;
        .leftInput {
          flex: 1;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .searchIcon {
            width: 30rpx;
            height: 30rpx;
            background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -1270rpx -2015rpx;
            background-size: 746rpx 350rpx;
            margin-right: 20rpx;
          }
          input {
            color: #171717;
            font-size: 30rpx;
            flex: 1;
            letter-spacing: 2rpx;
          }
        }
        .clearIcon {
          width: 30rpx;
          height: 30rpx;
          background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -1315rpx -2015rpx;
          background-size: 746rpx 350rpx;
          margin-left: 30rpx;
        }
      }
    }
    .historySearchResult {
      padding: 0 20rpx;
      box-sizing: border-box;
      .title {
        color: #171717;
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
      }
      .resultList {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        .resultItem {
          min-width: 144rpx;
          padding: 0 20rpx;
          box-sizing: border-box;
          height: 60rpx;
          line-height: 60rpx;
          color: #999;
          font-size: 26rpx;
          font-weight: bold;
          background: #FAFAFA;
          border-radius: 5rpx;
          text-align: center;
          margin-right: 30rpx;
          margin-bottom: 20rpx
        }
      }
    }
  }
</style>
